// 左键点击线
import G6 from "@antv/g6";
const LEFT_BUTTON = 0;

G6.registerBehavior('click-select-edge', {
    getDefaultCfg() {
        return {
            multiple: true,
            trigger: 'ctrl',
            selectedState: 'selected',
        }
    },
    getEvents() {
        const self = this;

        if (!self.multiple) {
            return {
                'edge:click': 'onEdgeClick',
            }
        }

        return {
            'edge:click': 'onEdgeClick',
            keyup: 'onKeyUp',
            keydown: 'onKeyDown',
        };
    },
    onEdgeClick(evt) {
        console.log('click-select-edge[onEdgeClick]', evt);

        if (evt.originalEvent.button === LEFT_BUTTON) {
            const {item} = evt;
            // item不存在或被销毁
            if (!item || item.destroyed) {
                return;
            }

            // 点击的类型
            // node：节点，edge：线
            // const type = item.getType();
            const {graph, keydown, multiple, shouldUpdate, shouldBegin} = this;
            if (!shouldBegin.call(this, evt)) {
                return;
            }

            // allow to select multiple edges but did not press a key || do not allow the select multiple edges
            if (!keydown || !multiple) {
                let selectedNodes = graph.findAllByState('node', this.selectedState);
                let selectedEdges = graph.findAllByState('edge', this.selectedState);
                selectedNodes.forEach((combo) => {
                    graph.setItemState(combo, this.selectedState, false);
                });
                selectedEdges.forEach((combo) => {
                    if (combo !== item) {
                        graph.setItemState(combo, this.selectedState, false);
                    }
                });
            }

            // 单选：节点是选中状态：不动，节点是非选中状态：选择
            // 多选：节点是选中状态：取消，节点是非选中状态：选择
            if (item.hasState(this.selectedState)) {
                // 获取当前节点 item > node
                // 大于两个点时动作
                // const selectedEdges = graph.findAllByState('edge', this.selectedState);
                // if (selectedEdges.length > 1) {
                if (keydown) {
                    const currentClickEdge = graph.findById(item.getID());
                    graph.setItemState(currentClickEdge, this.selectedState, false);
                }
                // }
            } else {
                // 选中线
                if (shouldUpdate.call(this, evt)) {
                    graph.setItemState(item, this.selectedState, true);
                }
            }

            const selectedEdges = graph.findAllByState('edge', this.selectedState);

            graph.emit('nodeselectchange', {
                target: item,
                selectedItems: {
                    edges: selectedEdges,
                },
                select: true,
            });
        }
    },
    onKeyDown(e) {
        const code = e.key;
        if (!code) {
            return;
        }
        if (code.toLowerCase() === this.trigger.toLowerCase() || code.toLowerCase() === 'control') {
            this.keydown = true;
        } else {
            this.keydown = false;
        }
    },
    onKeyUp() {
        this.keydown = false;
    }
});